<template>
  <div>
    <div class="item_header">
      <span>{{ headerTitle }}（{{ curIndex() + 1 }}）</span>
      <el-button
        type="text"
        style="float: right"
        v-if="
          !readonly &&
            formItemChildren.children &&
            curIndex() === formItemChildren.children.length - 1 &&
            curIndex() != 0
        "
        @click="delItem"
        >删除</el-button
      >
    </div>
    <el-col :span="span">
      <el-row :gutter="gutter" :class="borderClassName">
        <slot></slot>
      </el-row>
    </el-col>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import { mapGetters } from "vuex";
export default {
  name: "sz-form-item",
  props: {
    headerTitle: {
      type: String,
      default: "办公用品"
    },
    borderClassName: {
      type: String,
      default: ""
    },
    span: {
      type: Number,
      default: 24
    },
    // 只读
    readonly: {
      type: Boolean,
      default: false
    },
    gutter: {
      type: Number,
      default: 10
    },
    config: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  computed: {
    ...mapGetters({
      formItemChildren: "formItemChildren"
    })
  },
  methods: {
    curIndex() {
      let tem = 0;
      if (this.formItemChildren.children) {
        this.formItemChildren.children.forEach((item, index) => {
          if (item.__config__.formId === this.config.formId) {
            tem = index;
          }
        });
      } else {
        tem = 0;
      }
      return tem;
    },
    // 删除item
    delItem() {
      let tem = [];
      if (this.formItemChildren.children) {
        this.formItemChildren.children.forEach((item, index) => {
          if (item.__config__.formId !== this.config.formId) {
            tem.push(item);
          }
        });
      }
      this.formItemChildren.children = tem;
      this.$store.dispatch("updateFormItemChildren", this.formItemChildren);
    }
  },
  components: {
    draggable
  }
};
</script>

<style lang="less" scoped>
.item_header {
  line-height: 40px;
}
</style>
